<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title></title>
    <link rel="stylesheet" href="/plugins/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="/css/skin-blue.css">
    <link rel="stylesheet" href="/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/css/AdminLTE.css">
    <link rel="stylesheet" href="/css/ty-style.css">
</head>
<body class="hold-transition skin-blue layout-top-nav">
<div class="wrapper">
    <header class="main-header">
        <nav class="navbar navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <a href="/love" class="navbar-brand"><b>xyy</b>Home</a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </nav>
    </header>
    <!-- Full Width Column -->
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container">
                <h1><span>动态</span><small></small></h1>
            </div>
        </section>
        <section class="content">
            <div class="container">
                <!--正文-->
                
                <ul class="y-l-dynamic">
                    <li th:each="a : ${all}">
                        <div>
                            <div th:text="${a.yldUserId}"></div>
                            <div class="y-l-dynamic-state" th:text="${a.yldCreateTime}"></div>
                        </div>
                        <div class="y-l-dynamic-content" th:text="${a.yldContent}"></div>
                        <hr>

                        <ul th:id="'lI_comments_'+${a.yldId}">
                            <li th:each="hh : ${commentsMap[a.yldId]}">
                                <div th:text="${hh.yldcContent}"></div>
                                <div th:text="${hh.yldcCreateTime}"></div>
                            </li>
                        </ul>

                        <div class="y-l-dynamic-comment input-group  input-group-sm">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">赞</button>
                            </span>
                            <input th:id="'lI_comment_'+${a.yldId}" type="text" name="content" class="form-control" placeholder="评论">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" th:onclick="'lI_comment(\''+${a.yldId}+'\')'">发表</button>
                            </span>
                        </div>
                    </li>
                </ul>
                <div th:if="${err != null}" th:text="${err}"></div>
                <form action="/love/add" method="post">
                    <div class="form-group">
                        <label for="exampleInputEmail1">内容</label>
                        <input type="text" name="content" class="form-control" id="exampleInputEmail1">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>

                <!--/正文-->
            </div>
        </section>
        <!-- /.container -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <div class="container">
            这里是xyy爱情小屋
        </div>
        <!-- /.container -->
    </footer>
</div>
<!-- ./wrapper -->

<script type="text/javascript" src="/js/jquery-2.2.3.min.js" ></script>
<script type="text/javascript" src="/plugins/bootstrap-3.3.7/js/bootstrap.js" ></script>
<script type="text/javascript" src="/js/app.js" ></script>
<script>
    // 发表评论
    function lI_comment(id) {
        var content = $("#lI_comment_" + id).val();
        if (content === null || content.length === 0)
            return;
        $.post("/love/dynamic/comment",{id: id, content: content}, function(d) {
            alert(d.msg);
            if (d.success) {
                $("#lI_comments_" + id).append('<li><div>' + d.data.yldcContent + '</div><div>' + d.data.
                        yldcCreateTime + '</div></li>');
            }
        },"json");


    }



</script>
</body>
</html>